<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<!-- 就是watch默认是不检测全部的 如果要的话 就要自己手动开 -->
<!-- 以及Vue自身是可以监测的 但是里面的watch默认是不的 。 意思就是控制台输入Vue自身的 是可以监视到的  但是watch默认不行 如果要改 就要改动deep-->
<!--
     深度监视：
        (1).Vue中的watch默认不监测对象内部值的改变（一层）
        (2).配置deep:true可以监测对象内部值改变（多层）
     备注：
        (1).Vue自身可以监测对象内部值的改变 但是Vue提供的watch默认不可以！
        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
         -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changWeather">点击我切换天气</button>
            <hr/>
        </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;  //阻止Vue在启动时生成 生产提示

        //创建Vue实例
        const vm = new Vue({
            el:'#root',
            data:{
                //用布尔值来判断
                isHot:true,
                number:{
                a:1,
                b:2
            },
            },
            methods:{
                changWeather(){
                    //取反 当我点击按钮 就再true和false之间切换
                    this.isHot =!this.isHot
                }
            },
            computed:{
                info(){
                    //三目表达式 如果是true执行 如果是false执行
                    return this.isHot?'炎热':'凉爽'
                }
            },
            watch:{
                // isHot是简写 实际是 'isHot' 带引号
                isHot:{
                    immediate:true,//初始化时候 让handler调用一下
                // handler什么时候调用？让isHot发生改变时候
                handler(newValue,oldValue){
                    // 上边传参是固定的写法 新的值 旧的值
                    // 一开始只有新的 没有旧的
                    console.log('isHot被修改了',newValue,oldValue);
                }
                },

                //简写 不考虑其他的时候
                // isHot(newValue,oldValue){
                //     console.log('isHot被修改了',newValue,oldValue);
                // }
            },
        })


        //这个是在实例外边了
        // vm.$watch('isHot',{
        //         immediate:true,//初始化时候 让handler调用一下
        //         handler(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue);
        //         }
        //     })

        //简写
        // vm.$watch('isHot',function(newValue,oldValue){
        //     console.log('isHot被修改了',newValue,oldValue);
        // })
    </script>
</body>

</html>